<template>
  <div class="app-container">
    <div class="filter-container">
      <span>房间名称</span>
      <el-input v-model="channels.channelName" placeholder="请输入房间名称" style="width: 60%; margin-right: 20px"
        class="filter-item" />
    </div>
    <div class="filter-container">
      <span>房间图像</span>
      <el-upload class="upload-demo" action="http://testapi2.xunyinjiaoyou.com/record/uploadImg"
        :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed"
        :file-list="fileList" :http-request="uploadFile">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-button class="filter-item" type="primary" @click="confirm">
      创建
    </el-button>
  </div>
</template>

<script>
  import {
    encryption2
  } from '@/api/index'
  export default {
    name: 'ComplexTable',
    data() {
      return {
        // 渠道
        upload_url: '', //上传图片地址
        fileList: [],
        channels: {
          channelName: '', // 渠道名称
        }
      }
    },
    created() {

    },
    methods: {
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件`);
        // this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      uploadFile(param) {
        var that = this; //避免this指针在后面的请求以后改变
        var fileObj = param.file;
        // this.uploadAction是接收上传文件的后台地址
        var FileController = "http://testapi2.xunyinjiaoyou.com/record/uploadImg";
        // FormData 对象
        var forms = new FormData();
        // 文件对象
        forms.append("file", fileObj);
        // XMLHttpRequest 对象
        var xhr = new XMLHttpRequest();
        xhr.open("post", FileController, true);
        xhr.onload = function () {
          var strData = xhr.response; //回传的数据接受
          var jsonData = JSON.parse(strData); //这里由于后端接口返回的是String，而后面需要的是json
          that.upload_url = jsonData.result; //取出json中对应需要的数据存入form表单中
        };
        xhr.send(forms);
      },

      confirm() {
        const arys = {
          roomName: this.channels.channelName, // 房间名称
          icon: this.upload_url, //房间图片
        }
        const url = '/room/addRoom'
        encryption2(arys, url).then((res) => {
          if (res.data.status === 0) {
            this.$message({
              message: res.data.text,
              type: 'success'
            })
            this.$router.go(-1)
          } else {
            this.$message({
              message: res.data.text,
              type: 'error'
            })
          }
        })
      }
    }
  }
</script>
<style scoped>
  .filter-container {
    width: 1000px;
    display: flex;
    align-items: center;
  }

  .filter-container>span {
    width: 100px;
    font-size: 16px;
    font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>